<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <mate name="viewport" content="width=device-width, initial-scale=1.0"></mate>
    <title>后台登录</title>
    <script src="../static/js/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/me.css">

</head>
<body>
    <div class="m-container-small m-padded-tb-massive" style="max-width: 30em !important;">
    <div class="ur container">
        <div class="ui middle aligned center aligned grid">
            <div class="column">
                <h2 class="ui teal image header">
                    <div class="content">
                        广软社区信息系统注册
                    </div>
                </h2>
                <form class="ui large form" id="registerTable" method="post" action="#" th:action="@{/admin/login}">
                    <div class="ui segment">
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text" name="account" id="account" placeholder="请输入账号" onchange="checkAccount()">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="lock icon"></i>
                                <input id="password" type="password" name="password" placeholder="请输入密码" onchange="checkPassword()">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="mail icon"></i>
                                <input type="email" id="email" name="email" placeholder="请输入邮箱" onchange="checkEmail()">
                                <div class="send" onclick="sendCheckNumber()">
                                    <a href="#">点击发送</a>
                                </div>
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text" id="checkNumber" name="checkNumber" placeholder="请输入验证码">
                            </div>
                        </div>
                        <a id="register" style="margin-top: 7px;" onclick="submitRegister()" class="ui fluid submit large blue button">注   册</a>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $("#account").val("")
        $("#password").val("")
        $("#email").val("")
    })
    let isAccount = false
    let isEmail = false
    let isPassword = false

    function checkAccount() {
        if ($("#account").val().length == 0){
            $("#account").css("color", "red")
            $("#account").css("border", "1px solid red")
            alert("账号不能为空");
            isAccount = false
            return
        }
        let params = {account: $("#account").val()}
        $.get('/register/checkAccount',params,(data)=>{
            if (data != "ok") {
                $("#account").css("color", "red")
                $("#account").css("border", "1px solid red")
                alert(data)
                isAccount = false
            }else {
                $("#account").css("color", "green")
                $("#account").css("border", "1px solid green")
                isAccount = true
            }
        })
    }
    function checkPassword() {
        if ($("#password").val().length == 0) {
            $("#password").css("color", "red")
            $("#password").css("border", "1px solid red")
            alert("密码不能为空");
            isPassword = false
        }else {
            $("#password").css("color", "green")
            $("#password").css("border", "1px solid green")
            isPassword = true
        }
    }
    function checkEmail() {
        if ($("#email").val().length == 0){
            $("#email").css("color", "red")
            $("#email").css("border", "1px solid red")
            alert("账号不能为空");
            isEmail = false
            return
        }
        let params = {email: $("#email").val()}
        $.get('/register/checkEmail',params,(data)=>{
            if (data != "ok") {
                $("#email").css("color", "red")
                $("#email").css("border", "1px solid red")
                alert(data)
                isEmail = false
            }else {
                $("#email").css("color", "black")
                $("#email").css("border", "1px solid green")
                isEmail = true
            }
        })
    }
    function submitRegister() {
        if (isAccount && isPassword && isEmail) {
            let params = {
                account: $("#account").val(),
                password: $("#password").val(),
                email: $("#email").val(),
                checkNumber: $("#checkNumber").val()
            }
            $.post("/register", params, (data) => {
                if (data == "ok") {
                    alert("注册成功")
                    window.location.href = "/admin"
                }else {
                    alert(data)
                }
            })
            return
        }
        alert("请输入正确的信息")
    }
    function sendCheckNumber() {
        if ($("#email").val().length == 0){
            alert("邮箱不能为空")
            return
        }
        let params = {
            email: $("#email").val()
        }
        $.post("/register/sendEmailNumber", params, (data)=>{
            console.log(data)
            if (data == "ok") {
                alert("请注意"+ $("#email").val() + "的验证码信息！")
                $("#email").addClass('disable')
            }else {
                alert(data)
            }
        })
    }
</script>
</body>
</html>